var that;
class Tab {
    //接收传递过来的参数
    constructor(id) {
        that = this;
        //获取元素
        //获取大盒子 记住所有的属性要加this 指向函数调用者
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');

        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul');
        //section的父元素
        this.fsection = this.main.querySelector('.tabscon');
        this.init(); //一定不能写成init(),实例化哪个对象 哪个对象就调用这个方法 new一下立即加载页面自动调用
    }
    init() {
        // init初始化操作 让相关的元素绑定事件
        //初始化
        // 只要一点击就要重新初始化 先获取元素在绑定
        this.updateNode();
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            //this指向函数的调用者 给每个小li添加一个索引号
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab;
            this.guanbis[i].index = i;
            this.guanbis[i].onclick = this.removeTab;
            // 双击两下触发事件
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
            //点击完之后在调用  不用加小括号 加上的话页面一加载直接调用了
        }
    }
    // 获取所有的小li和section 解决了新添加的没有添加样式的bug
    updateNode() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        // 每次添加一个li就要添加一个remove事件
        this.guanbis = this.main.querySelectorAll('.icon-guanbi');
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
    }
    //1 切换功能
    toggleTab() {
        // console.log(this.index);
        //this指向的是每个小li，that指向的是当前的实例对象，所以用that
        that.clearClass();
        //这个this指向的是小li，小li没有section这个属性，section这个是属性是属于constructor 可以声明一个全局变量
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';
    }
    // 添加一个清除类 清除所有li和section的类
    clearClass() {
        //这个this的指向是指向constructor，所以这个用this没问题
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2 添加功能
    addTab() {
        // console.log(11);
        that.clearClass();
        // (1) 创建li元素和section元素
        var random = Math.random();
        // var li = '<li><span>新选项卡</span><span class="close">x</span></li>';
        var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
        //每次生成随机数作为新增内容 
        var section = '<section class="conactive">测试' + random + '</section>';
        that.fsection.insertAdjacentHTML('beforeend', section);
        that.ul.insertAdjacentHTML('beforeend', li);
        // 先创建元素在初始化
        that.init();
        //添加了之后要重新 
        //把li这个字符串追加到父元素最后面 不能用this，因为this的话指向的是按钮，按钮里没有ul，所以要用constructor里面的that，insertAdjacentHTML可以添加字符串
        // (2) 把两个创建的元素添加到对应的父元素里面

    }
    //3 删除功能 删除小li和section
    removeTab(e) {
        e.stopPropagation(); //阻止冒泡防止触发li的切换点击事件
        // 拿不到关闭按钮的索引号但是可以拿到它的父元素的索引号
        var index = this.parentNode.index;
        console.log(index);
        // 删除索引号删除对应的li和section
        // this指向的是按钮，所以要指向其父元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.guanbis[index].remove();
        that.init();
        // 当我们删除的不是选中状态的li的时候，原来的选中状态li保持不变
        // 如果有选定状态直接return，不用进行手动点击
        if (document.querySelector('.liactive')) return;
        // 当我们删除了选定状态的li的时候，让它的前一个li出于选定状态
        index--;
        //手动调用点击事件 不需要鼠标触发 这样可以避免下标为负数 让前一个小li变成选定状态
        that.lis[index] && that.lis[index].click();
    }
    //4 修改功能
    editTab() {
        // alert(11);
        // 双击禁止选中文字 this指向的是span
        var str = this.innerHTML;
        //屏幕取词
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text"></input>';
        // 修改span的第一个孩子中的value
        var input = this.children[0];
        input.value = str;
        input.select(); //文本框里面的文字处于选中状态
        // 当我们离开文本框就把文本框里面的值给span
        input.onblur = function () {
            /// 把表单里面的值给input父亲span value主要用于操作表单里面的值，innerHTML用来修改HTML元素的格式内容
            this.parentNode.innerHTML = this.value;
        }
        // 按下回车也可以把文本框里面的值给span 这个属于键盘事件
        input.onkeyup = function (e) {
            if (e.keyCode == 13) {
                //手动调用表单失去焦点事件 不需要鼠标离开操作
                this.blur();
            }
        }
    }
}
var tab = new Tab('#tab');
//参数传递给类
